<template>
  <table>
    <tr v-for="(item, key, index) of table" :key="index">
      <td v-for="td of item" :key="td.key" @click="handleClickTd(td.code)" :colspan="td.col === 0 ? 1 : td.col" :rowspan="td.row">
        {{ td.key }}
      </td>
    </tr>
  </table>
</template>

<script>
import { renderTable } from '@/utils/filterData'
export default {
  name: 'DrawTable',
  data() {
    return {
      list: [{
        'children': [{
          'children': [],
          'departmentname': '部门自评',
          'depassessmentcode': '32',
          'dptype': '1',
          'parentscode': '27',
          'proportion': 30
        }, {
          'children': [{
            'children': [],
            'departmentname': '党组书记',
            'depassessmentcode': '34',
            'dptype': '1',
            'parentscode': '33',
            'proportion': 30
          }, {
            'children': [],
            'departmentname': '党组副书记',
            'depassessmentcode': '35',
            'dptype': '1',
            'parentscode': '33',
            'proportion': 24
          }, {
            'children': [],
            'departmentname': '其他领导班子',
            'depassessmentcode': '36',
            'dptype': '1',
            'parentscode': '33',
            'proportion': 36
          }, {
            'children': [],
            'departmentname': '专职委员和副巡视员',
            'depassessmentcode': '37',
            'dptype': '1',
            'parentscode': '33',
            'proportion': 10
          }],
          'departmentname': '领导班子',
          'depassessmentcode': '33',
          'dptype': '1',
          'parentscode': '27',
          'proportion': 70
        }],
        'departmentname': '职能工作',
        'depassessmentcode': '27',
        'dptype': '1',
        'parentscode': '0',
        'proportion': 60
      }, {
        'children': [{
          'children': [],
          'departmentname': '党支部工作',
          'depassessmentcode': '38',
          'dptype': '1',
          'parentscode': '28',
          'proportion': 50
        }, {
          'children': [],
          'departmentname': '纪律作风管理',
          'depassessmentcode': '39',
          'dptype': '1',
          'parentscode': '28',
          'proportion': 50
        }],
        'departmentname': '机关党建',
        'depassessmentcode': '28',
        'dptype': '1',
        'parentscode': '0',
        'proportion': 15
      }, {
        'children': [{
          'children': [],
          'departmentname': '检察政务',
          'depassessmentcode': '40',
          'dptype': '1',
          'parentscode': '29',
          'proportion': 60
        }, {
          'children': [],
          'departmentname': '法律政策研究',
          'depassessmentcode': '41',
          'dptype': '1',
          'parentscode': '29',
          'proportion': 20
        }, {
          'children': [],
          'departmentname': '检察技术信息',
          'depassessmentcode': '42',
          'dptype': '1',
          'parentscode': '29',
          'proportion': 20
        }],
        'departmentname': '政务工作',
        'depassessmentcode': '29',
        'dptype': '1',
        'parentscode': '0',
        'proportion': 10
      }, {
        'children': [{
          'children': [],
          'departmentname': '内设机构干部人事管理',
          'depassessmentcode': '43',
          'dptype': '1',
          'parentscode': '30',
          'proportion': 40
        }, {
          'children': [],
          'departmentname': '新闻宣传',
          'depassessmentcode': '44',
          'dptype': '1',
          'parentscode': '30',
          'proportion': 40
        }, {
          'children': [],
          'departmentname': '教育培训',
          'depassessmentcode': '45',
          'dptype': '1',
          'parentscode': '30',
          'proportion': 20
        }],
        'departmentname': '政治工作',
        'depassessmentcode': '30',
        'dptype': '1',
        'parentscode': '0',
        'proportion': 10
      }, {
        'children': [{
          'children': [],
          'departmentname': '固定资产使用保管',
          'depassessmentcode': '46',
          'dptype': '1',
          'parentscode': '31',
          'proportion': 20
        }, {
          'children': [],
          'departmentname': '办公耗材管理',
          'depassessmentcode': '47',
          'dptype': '1',
          'parentscode': '31',
          'proportion': 20
        }, {
          'children': [],
          'departmentname': '经费开支管理',
          'depassessmentcode': '48',
          'dptype': '1',
          'parentscode': '31',
          'proportion': 20
        }, {
          'children': [],
          'departmentname': '厉行节约管理',
          'depassessmentcode': '49',
          'dptype': '1',
          'parentscode': '31',
          'proportion': 20
        }, {
          'children': [],
          'departmentname': '国旗使用管理及检察办案工作区管理',
          'depassessmentcode': '50',
          'dptype': '1',
          'parentscode': '31',
          'proportion': 20
        }],
        'departmentname': '办公后勤管理',
        'depassessmentcode': '31',
        'dptype': '1',
        'parentscode': '0',
        'proportion': 5
      }],
      table: {}
    }
  },
  mounted() {
    this.table = renderTable(this.list, 'departmentname', 'depassessmentcode')
  },
  methods: {
    handleClickTd(code) {
      console.log(code)
    }
  }
}
</script>

<style lang="stylus" scoped>
  table
    border 1px solid #000000
    td
      border 1px solid #000000
</style>
